<!--
 * @Descripttion: 活动规则
 * @version: 
 * @Author:Hui
 * @Date: 2023-10-18 16:05:57
 * @LastEditTime: 2023-10-18 16:08:27
 * @LastEditors:Hui
-->


<template>
  <view class="page">
    <!-- #ifdef H5 -->
    <custom-navbar title="活动规则" />
    <!-- #endif -->
    <view class='article'>
      <view class='content' v-show="htmlNodes.length">
        <rich-text :nodes="htmlNodes" />
      </view>
    </view>
  </view>
</template>

<script>

import parse from 'mini-html-parser2'

import { getActiveRule } from '@/api'

import { array_replace } from '@/utils'

export default {

  onLoad(options) {
    if (options.symbol) {
      this.symbol = options.symbol
      this.loadArticleData()
    }
  },


  data() {
    return {
      symbol: '',
      detail: {},
      htmlNodes: [],
    }
  },

  onShareAppMessage() {
    return {
      title: '活动规则',
    };
  },

  onShareTimeline() {
    return {
      title: '活动规则',
    };
  },

  methods: {
    async loadArticleData() {
      uni.showLoading({ title: '加载中', mask: true })

      const res = await getActiveRule(this.symbol)

      if (res.code === 200) {
        this.detail = res.data
        if (res.data.content) {
          let content = res.data.content;
          let arr = ["&nbsp;"];
          content = content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
            var newStr = '<img src="' + capture + '" width="100%" height="100%"/>';
            return newStr;
          });
          content = array_replace(content, arr);
          parse(content, (err, htmlData) => {
            if (!err) {
              this.htmlNodes = htmlData
            }
          })
        }
      }

    }
  }
}
</script>


<style lang="scss" scoped>
.page{
  font-size: 28rpx;
  line-height: 48rpx;
  padding: 30rpx 28rpx;
  min-height: 100vh;
  background: #fff;
  .h1{
    font-size: 32rpx;
    color: #333;
    line-height: 40rpx;
  }
  img {
    margin: 20rpx 0;
    width: 100%;
    height: 100%;
  }
}
</style>